<template>
  <div style="overflow-x: hidden;">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <div class="form-group">
          <label for="f_user_id" class="col-sm-offset-1 col-sm-1 control-label">用户编号:</label>
          <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_user_id"
              v-validate:f_user_id='{ required: true }' placeholder="用户编号不能为空" >
          </div>

          <label for="f_user_name" class="col-sm-1 control-label">用户姓名:</label>
          <div class="col-sm-2">
             <input class="form-control" type="text" v-model="model.f_user_name"
             v-validate:f_user_name='{ required: true }' placeholder="用户姓名不能为空" placeholder='用户姓名' >
          </div>
           <label for="f_user_phone" class="col-sm-1 control-label">用户电话:</label>
           <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_user_phone"
              v-validate:f_user_phone='{ required: true }' placeholder="用户电话不能为空" >
            </div>
          </div>

          <div class="form-group">
            <label for="f_subcompany" class="col-sm-offset-1 col-sm-1 control-label">所属分公司:</label>
            <div class="col-sm-2">
              <v-select id="f_subcompany"
              placeholder='请选择分公司'
              :value.sync="f_subcompany"
              :options='f_divisions'
              close-on-select clear-button></v-select>
            </div>

            <label for="f_archive_date" class="col-sm-1 control-label">建档日期:</label>
            <div class="col-sm-2">
              <datepicker id="startdate"
                :value.sync="model.f_archive_date"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                width = "171px"
                placeholder='建档日期'>
              </datepicker>
            </div>
             <label for="f_user_type" class="col-sm-1 control-label">用户类型:</label>
             <div class="col-sm-2">
               <v-select id="f_user_type"
               placeholder='请选择'
               :value.sync="f_user_type"
               :options='f_usertype'
               close-on-select clear-button></v-select>
              </div>
            </div>

          <div class="form-group">
             <label for="f_street" class="col-sm-offset-1 col-sm-1 control-label">街道:</label>
             <div class="col-sm-2">
                <input class="form-control" type="text" v-model="model.f_street"
                v-validate:f_street='{ required: true }' placeholder='街道'>
             </div>
             <label for="f_residential_area" class="col-sm-1 control-label">小区:</label>
              <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_residential_area"
                 v-validate:f_residential_area='{ required: true }' placeholder='小区'>
              </div>

              <label for="f_building" class="col-sm-1 control-label">楼号:</label>
              <div class="col-sm-2">
                <input class="form-control" type="text" v-model="model.f_building"
                v-validate:f_building='{ required: true }' placeholder='楼号'>
              </div>
            </div>

            <div class="form-group">
               <label for="f_unit" class="col-sm-offset-1 col-sm-1 control-label">单元:</label>
               <div class="col-sm-2">
                  <input class="form-control" type="text" v-model="model.f_unit"
                  v-validate:f_unit='{ required: true }'
                  placeholder='单元'>
               </div>

               <label for="f_floor" class="col-sm-1 control-label">楼层:</label>
               <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_floor"
                 v-validate:f_floor='{ required: true }' placeholder='楼层'>
               </div>

               <label for="f_room" class="col-sm-1 control-label">门牌号:</label>
               <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_room"
                 v-validate:f_room='{ required: true }'  placeholder='门牌号'>
               </div>
              </div>

              <div class="form-group">
                 <label for="f_address" class="col-sm-offset-1 col-sm-1 control-label">详细地址:</label>
                 <div class="col-sm-2">
                    <input class="form-control" type="text" v-model="model.f_address"
                    v-validate:f_address='{ required: true }' placeholder='详细地址'>
                 </div>


                 <label for="f_last_check_date" class="col-sm-1 control-label">最后安检日期:</label>
                 <div class="col-sm-2">
                   <datepicker id="f_last_check_date"
                     :value.sync="model.f_last_check_date"
                     :disabled-days-of-Week="[]"
                     :format="'yyyy-MM-dd'"
                     width = "171px"
                      placeholder='最后安检日期'>
                   </datepicker>
                 </div>
                  <label for="f_last_check_state" class="col-sm-1 control-label">最后安检状态:</label>
                  <div class="col-sm-2">
                    <v-select id="f_last_check_state"
                    placeholder='请选择'
                    :value.sync="f_last_check_state"
                    :options='last_checkstate'
                    close-on-select clear-button></v-select>
                   </div>

                </div>
                <div class="form-group">

                  <label for="f_checker" class="col-sm-offset-1 col-sm-1 control-label">安检负责人:</label>
                  <div class="col-sm-2">
                    <v-select id="f_checker"
                    placeholder='请选择'
                    :value.sync="f_checker_selected"
                    :options='f_checkers'
                    close-on-select clear-button></v-select>
                  </div>

                  <label for="f_state" class=" col-sm-1 control-label">档案状态:</label>
                  <div class="col-sm-2">
                    <v-select id="f_state"
                    placeholder='请选择'
                    :value.sync="f_state"
                    :options='fstate'
                    close-on-select clear-button
                    placeholder='档案状态'></v-select>
                  </div>

                  <label for="f_inputdate" class=" col-sm-1 control-label">录入时间:</label>
                  <div class="col-sm-2">
                    <datepicker id="f_inputdate"
                      :value.sync="model.f_inputdate"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      width = "171px"
                       placeholder='录入时间'>
                    </datepicker>
                  </div>
                  </div>

                  <div class="form-group">
                   <label for="f_remark" class=" col-sm-offset-1 col-sm-1 control-label">备注:</label>
                   <div class="col-sm-6">
                     <input class="form-control" type="text" v-model="model.f_remark"   placeholder='备注'>
                   </div>
                  </div>
          </form>
          <div style="text-align:center;height:auto;">
            <button class="btn btn-success width-80" :disabled="!($v.valid&&open)" @click="confirm()" style="width:100px;margin-left:20px;">
              <span class="glyphicon glyphicon-floppy-disk"></span>保存
            </button>
            <button class="btn btn-default"  @click='$back()' style="width:100px;margin-left:20px;">
              <span class="glyphicon glyphicon-log-out"></span>返回
            </button>
          </div>
    </validator>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'

let saveGen = function * (self) {
  self.model.f_sign = '1'
  self.model.f_subcompany = self.f_subcompany[0]
  self.model.f_user_type = self.f_user_type[0]
  self.model.f_last_check_state = self.f_last_check_state[0]
  self.model.f_state = self.f_state[0]
  let p = self.f_checker_selected[0].indexOf('-')
  self.model.f_checker = self.f_checker_selected[0].substring(0, p)
  self.model.f_checker_id = self.f_checker_selected[0].substring(p+1)
  yield self.$post('rs/logic/人工录入', { data: self.model })
  // 通知项目保存成功。
  self.$back()
}

export default {
  title: '添加档案',
  props: [ 'f' ],
  data () {
    return {
      model: {
        f_last_check_date: '',
        f_archive_date: '',
        f_checker: '',
        f_inputdate: ''
      },
      f_user_id: '',
      f_user_name: '',
      f_user_phone: '',
      f_archive_date: '',
      f_street: '',
      f_residential_area: '',
      f_building: '',
      f_unit: '',
      f_floor: '',
      f_room: '',
      f_address: '',
      f_remark: '',
      f_last_check_date: '',
      f_subcompany: [''],
      f_divisions: this.$getParams('安检系统用子公司', [{label: '请选择', value: ''}]),
      f_user_type: [''],
      f_usertype: this.$getParams('用户类型', [{label: '请选择', value: ''}]),
      f_last_check_state: [''],
      last_checkstate: this.$getParams('安检状态', [{label: '请选择', value: ''}]),
      f_state: ['点火'],
      fstate: this.$getParams('用户档案状态', [{label: '请选择', value: ''}]),
      f_checker_selected: [''],
      f_checkers: this.$getParams(Vue.f_subcompany + '安检员', [{label: '请选择', value: null}]),
    }
  },
  methods: {
    confirm () {
      let gen = saveGen(this)
      return co(gen)
    }
  },
  computed: {
    open () {
      if (this.f_subcompany[0] !== '' && this.model.f_archive_date !== '' && this.f_user_type[0] !== '' && this.model.f_last_check_date !== '' &&
      this.f_last_check_state[0] !== '' && this.f_state[0] !== '' && this.model.f_inputdate !== '' && this.f_checker_selected[0]) {
        return true
      } else {
        return false
      }
    }
  }
}

</script>
